header, main, nav, section, summary {display: block;}
#app {display: flex; min-height: 100vh; flex-direction: column; background-image: url("/background.jpg"); background-repeat: no-repeat; background-size: cover; background-position: bottom center;}
#app .content {flex-grow: 1; display: flex; flex-direction: column;}
#app main {flex-direction: column;}
#app main, #app #sortable {padding: 30px 10px; display: flex; justify-content: center; align-items: center; flex: 1; position: relative; flex-wrap: wrap; align-content: center; list-style: none; margin: 0;}
.module-container {box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4); border: 1px solid #cdced8; background: #f9fafd; max-width: 1000px; width: 100%; margin: 10px 40px; border-radius: 5px; overflow: hidden;}

#config-buttons {position: fixed; bottom: 0; right: 0; display: flex; flex-direction: column;}
#config-buttons a {text-align: center; line-height: 30px; color: white; margin-top: 1px;}

.module-container .table {width: 100%; margin: 0; background: #fff;}
.module-container .table thead th {background: #f2f3f6; color: #767d94; border-top: 1px solid #fff; text-align: left; font-size: 13px; text-transform: uppercase; padding: 15px 25px;}
.module-container .table tbody tr:hover {background: #fefbf2;}
.module-container .table tbody tr:hover td:first-child {position: relative;}
.module-container .table tbody tr:hover td:first-child:before {content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: #0eb584;}
.module-container .table tbody td {padding: 20px 25px; font-size: 13px; color: #2f313a; max-width: 500px; word-break: break-word;}
.module-container .table tbody td.form-error {background: #e69191; color: white; text-align: center;}
.module-container .table tbody a {color: #2f313a;}
.module-container header .section-title, .module-container footer .section-title {font-size: 18px; color: #5b5b5b; margin-left: 25px;}
